<template>
  <div class="mainpage-container">
    <el-card class="box-card-component" style="margin-left: 8px">
      <div class="box-card-header">
        <img :src="this.pic" />
      </div>
      <div style="position: relative">
        <el-form
          ref="accountData"
          :model="accountData"
          label-width="120px"
          style="margin-top: 60px"
        >
          <!-- <el-form ref="accountData" :model="accountData" label-width="120px"> -->
          <el-form-item :label="accountDataRemark.accountId">
            <el-input v-model="accountData.id" />
          </el-form-item>
          <el-form-item :label="accountDataRemark.money">
            <el-input v-model="accountData.money" />
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "accountCard",
  props: {
    accountData: {
      type: Object,
      default: "",
    },
  },
  computed: {},
  data() {
    return {
      pic: require("@/assets/images/account.jpg"),
      accountDataRemark: {
        accountId: "卡号",
        pic: "图片",
        money: "金额",
        displayBalance: "显示余额",
        detail: "明细",
        transfer: "转账",
        financialTransactions: "理财",
      },
    };
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.mainpage-container {
  height: 100%;
  width: 100%;
}
.mainpage {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
img {
  width: 100%;
  height: 100%;
  transition: all 0.2s linear;

  &:hover {
    transform: scale(1.1, 1.1);
    filter: contrast(130%);
  }
}

.box-card-component {
  width: 100%;
  .el-card__header {
    padding: 0px !important;
  }
}

.panThumb {
  z-index: 100;
  height: 70px !important;
  width: 70px !important;
  position: absolute !important;
  top: -45px;
  left: 0px;
  border: 5px solid #ffffff;
  background-color: #fff;
  margin: auto;
  box-shadow: none !important;

  .pan-info {
    box-shadow: none !important;
  }
}
</style>
